import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';

import { useDebounceFn } from '@vueuse/core';

interface UseTableHeightOptions {
	containerRef: Ref<HTMLElement | undefined>;
	searchRef: Ref<HTMLElement | undefined>;
	paginationRef: Ref<HTMLElement | undefined>;
	searchConfig?: any;
	paginationConfig?: any;
}

export function useTableHeight({ containerRef, searchRef, paginationRef, searchConfig, paginationConfig }: UseTableHeightOptions) {
	// 计算表格高度
	const tableHeight = ref(500); // 默认高度

	// 更新表格高度的函数
	const updateTableHeight = () => {
		// 使用 nextTick 确保 DOM 更新完成
		nextTick(() => {
			if (!containerRef.value) return;

			// 获取视口高度
			const viewportHeight = window.innerHeight;

			// 获取表格容器相对于视口的位置
			const containerRect = containerRef.value.getBoundingClientRect();
			// 组件间距（space-y-4 = 1rem = 16px）
			const componentGap = 16;
			// 搜索组件高度（如果存在）
			const searchHeight = searchRef.value?.offsetHeight ? searchRef.value?.offsetHeight + componentGap : 0;
			// 分页组件高度（如果存在）
			const paginationHeight = paginationRef.value?.offsetHeight ? paginationRef.value?.offsetHeight + componentGap : 0;

			// 计算表格可用高度
			// 视口高度 - 容器顶部位置 - 搜索组件高度 - 分页组件高度 - 组件间距（2个） - 底部边距
			const availableHeight = viewportHeight - containerRect.top - searchHeight - paginationHeight - 24;

			// 设置最小高度 300px
			tableHeight.value = Math.max(availableHeight, 300);
		});
	};

	// 防抖处理
	const debouncedUpdateHeight = useDebounceFn(updateTableHeight, 100);

	// 监听窗口大小变化和容器大小变化
	const setupResizeObservers = () => {
		// 监听窗口大小变化
		window.addEventListener('resize', debouncedUpdateHeight);

		// 创建 ResizeObserver 实例
		const observer = new ResizeObserver(debouncedUpdateHeight);

		// 监听容器大小变化
		if (containerRef.value) {
			observer.observe(containerRef.value);
		}

		// 监听搜索组件大小变化
		if (searchRef.value) {
			observer.observe(searchRef.value);
		}

		// 监听分页组件大小变化
		if (paginationRef.value) {
			observer.observe(paginationRef.value);
		}

		return observer;
	};

	// 组件挂载后初始化
	let resizeObserver: ResizeObserver | null = null;

	onMounted(() => {
		// 初始化高度（延迟执行确保组件都已渲染）
		nextTick(() => {
			updateTableHeight();
			// 设置监听器
			resizeObserver = setupResizeObservers();
		});
	});

	// 监听搜索条件变化
	if (searchConfig) {
		watch(
			() => searchConfig,
			() => {
				nextTick(updateTableHeight);
			},
			{ deep: true }
		);
	}

	// 监听分页配置变化
	if (paginationConfig) {
		watch(
			() => paginationConfig,
			() => {
				nextTick(updateTableHeight);
			},
			{ deep: true }
		);
	}

	// 组件卸载时清理
	onUnmounted(() => {
		// 移除窗口大小变化监听
		window.removeEventListener('resize', debouncedUpdateHeight);
		// 断开 ResizeObserver 连接
		if (resizeObserver) {
			resizeObserver.disconnect();
			resizeObserver = null;
		}
	});

	return {
		tableHeight,
		updateTableHeight,
	};
}
